ಮಾರ್ಪಡಕ ಜೋಡಣೆಯಲ್ಲಿ ಪರಿಣತಿ ಹೊಂದುವ ಮೂಲಕ ನಿಮ್ಮ ಟೈಲ್‌ವಿಂಡ್ CSS ಕೌಶಲ್ಯಗಳನ್ನು ಹೆಚ್ಚಿಸಿಕೊಳ್ಳಿ. ಸಂಕೀರ್ಣ, ಡೈನಾಮಿಕ್ UIಗಳನ್ನು ಸುಲಭವಾಗಿ ನಿರ್ಮಿಸಲು ರೆಸ್ಪಾನ್ಸಿವ್, ಸ್ಟೇಟ್ ಮತ್ತು ಗ್ರೂಪ್ ಮಾರ್ಪಡಕಗಳನ್ನು ಸಂಯೋಜಿಸಲು ಕಲಿಯಿರಿ.
ಟೈಲ್‌ವಿಂಡ್‌ನ ಶಕ್ತಿಯನ್ನು ಅನ್ಲಾಕ್ ಮಾಡುವುದು: ಸಂಕೀರ್ಣ ಯುಟಿಲಿಟಿ ಸಂಯೋಜನೆಗಳಿಗಾಗಿ ಮಾರ್ಪಡಕಗಳನ್ನು ಜೋಡಿಸುವ ಕಲೆ
ಟೈಲ್‌ವಿಂಡ್ CSS, ವೆಬ್‌ಗಾಗಿ ಸ್ಟೈಲಿಂಗ್ ಮಾಡುವಲ್ಲಿ ಅನೇಕ ಡೆವಲಪರ್‌ಗಳ ವಿಧಾನವನ್ನು ಮೂಲಭೂತವಾಗಿ ಬದಲಾಯಿಸಿದೆ. ಇದರ ಯುಟಿಲಿಟಿ-ಫಸ್ಟ್ ತತ್ವವು ನಿಮ್ಮ HTML ಅನ್ನು ಬಿಡದೆಯೇ ವೇಗವಾಗಿ ಪ್ರೊಟೊಟೈಪಿಂಗ್ ಮಾಡಲು ಮತ್ತು ಕಸ್ಟಮ್ ವಿನ್ಯಾಸಗಳನ್ನು ನಿರ್ಮಿಸಲು ಅನುಮತಿಸುತ್ತದೆ. p-4 ಅಥವಾ text-blue-500 ನಂತಹ ಏಕ ಯುಟಿಲಿಟಿಗಳನ್ನು ಅನ್ವಯಿಸುವುದು ಸರಳವಾಗಿದ್ದರೂ, ಟೈಲ್‌ವಿಂಡ್‌ನ ನಿಜವಾದ ಶಕ್ತಿಯು ನೀವು ಸಂಕೀರ್ಣ, ಸ್ಟೇಟ್‌ಫುಲ್ ಮತ್ತು ರೆಸ್ಪಾನ್ಸಿವ್ ಯೂಸರ್ ಇಂಟರ್‌ಫೇಸ್‌ಗಳನ್ನು ರಚಿಸಲು ಪ್ರಾರಂಭಿಸಿದಾಗ ಅನಾವರಣಗೊಳ್ಳುತ್ತದೆ. ಇದರ ಹಿಂದಿನ ರಹಸ್ಯವು ಒಂದು ಶಕ್ತಿಯುತ, ಆದರೆ ಸರಳವಾದ ಪರಿಕಲ್ಪನೆಯಲ್ಲಿದೆ: ಮಾರ್ಪಡಕ ಜೋಡಣೆ (modifier stacking).
ಅನೇಕ ಡೆವಲಪರ್‌ಗಳು hover:bg-blue-500 ಅಥವಾ md:grid-cols-3 ನಂತಹ ಏಕ ಮಾರ್ಪಡಕಗಳೊಂದಿಗೆ ಆರಾಮದಾಯಕರಾಗಿದ್ದಾರೆ. ಆದರೆ ದೊಡ್ಡ ಪರದೆಯಲ್ಲಿ ಹೋವರ್ ಮಾಡಿದಾಗ, ಮತ್ತು ಡಾರ್ಕ್ ಮೋಡ್ ಸಕ್ರಿಯವಾಗಿದ್ದಾಗ ಮಾತ್ರ ನೀವು ಶೈಲಿಯನ್ನು ಅನ್ವಯಿಸಬೇಕಾದರೆ ಏನು ಮಾಡುವುದು? ಇಲ್ಲಿಯೇ ಮಾರ್ಪಡಕ ಜೋಡಣೆ ಬರುತ್ತದೆ. ಇದು ಪರಿಸ್ಥಿತಿಗಳ ಸಂಯೋಜನೆಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುವ ಅತಿ-ನಿರ್ದಿಷ್ಟ ಸ್ಟೈಲಿಂಗ್ ನಿಯಮಗಳನ್ನು ರಚಿಸಲು ಬಹು ಮಾರ್ಪಡಕಗಳನ್ನು ಒಟ್ಟಿಗೆ ಜೋಡಿಸುವ ತಂತ್ರವಾಗಿದೆ.
ಈ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿ ನಿಮ್ಮನ್ನು ಮಾರ್ಪಡಕ ಜೋಡಣೆಯ ಜಗತ್ತಿನಲ್ಲಿ ಆಳವಾಗಿ ಕೊಂಡೊಯ್ಯುತ್ತದೆ. ನಾವು ಮೂಲಭೂತ ಅಂಶಗಳಿಂದ ಪ್ರಾರಂಭಿಸಿ, ಸ್ಟೇಟ್‌ಗಳು, ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳು, `group`, `peer`, ಮತ್ತು ಆರ್ಬಿಟ್ರರಿ ವೇರಿಯಂಟ್‌ಗಳನ್ನು ಒಳಗೊಂಡ ಸುಧಾರಿತ ಸಂಯೋಜನೆಗಳವರೆಗೆ ಹಂತಹಂತವಾಗಿ ನಿರ್ಮಿಸುತ್ತೇವೆ. ಕೊನೆಯಲ್ಲಿ, ನೀವು ಕಲ್ಪಿಸಬಹುದಾದ ಯಾವುದೇ UI ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಟೈಲ್‌ವಿಂಡ್ CSS ನ ಡಿಕ್ಲರೇಟಿವ್ ಸೊಬಗಿನೊಂದಿಗೆ ನಿರ್ಮಿಸಲು ಸಜ್ಜಾಗಿರುತ್ತೀರಿ.
ಅಡಿಪಾಯ: ಏಕ ಮಾರ್ಪಡಕಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು
ನಾವು ಜೋಡಿಸುವ ಮೊದಲು, ನಾವು ನಿರ್ಮಾಣದ ಬ್ಲಾಕ್‌ಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಬೇಕು. ಟೈಲ್‌ವಿಂಡ್‌ನಲ್ಲಿ, ಮಾರ್ಪಡಕವು ಯುಟಿಲಿಟಿ ಕ್ಲಾಸ್‌ಗೆ ಸೇರಿಸಲಾದ ಒಂದು ಪೂರ್ವಪ್ರತ್ಯಯವಾಗಿದ್ದು, ಆ ಯುಟಿಲಿಟಿಯನ್ನು ಯಾವಾಗ ಅನ್ವಯಿಸಬೇಕು ಎಂಬುದನ್ನು ನಿರ್ದೇಶಿಸುತ್ತದೆ. ಅವು ಮೂಲಭೂತವಾಗಿ CSS ಸ್ಯೂಡೋ-ಕ್ಲಾಸ್‌ಗಳು, ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳು ಮತ್ತು ಇತರ ಷರತ್ತುಬದ್ಧ ನಿಯಮಗಳ ಯುಟಿಲಿಟಿ-ಫಸ್ಟ್ ಅನುಷ್ಠಾನವಾಗಿದೆ.
ಮಾರ್ಪಡಕಗಳನ್ನು ವಿಶಾಲವಾಗಿ ಈ ಕೆಳಗಿನಂತೆ ವರ್ಗೀಕರಿಸಬಹುದು:
- ಸ್ಥಿತಿ ಮಾರ್ಪಡಕಗಳು (State Modifiers): ಇವು ಎಲಿಮೆಂಟ್‌ನ ಪ್ರಸ್ತುತ ಸ್ಥಿತಿಯನ್ನು ಆಧರಿಸಿ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸುತ್ತವೆ, ಉದಾಹರಣೆಗೆ ಬಳಕೆದಾರರ ಸಂವಹನ. ಸಾಮಾನ್ಯ ಉದಾಹರಣೆಗಳೆಂದರೆ
hover:,focus:,active:,disabled:, ಮತ್ತುvisited:. - ರೆಸ್ಪಾನ್ಸಿವ್ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್ ಮಾರ್ಪಡಕಗಳು: ಇವು ಮೊಬೈಲ್-ಫಸ್ಟ್ ವಿಧಾನವನ್ನು ಅನುಸರಿಸಿ, ನಿರ್ದಿಷ್ಟ ಪರದೆಯ ಗಾತ್ರ ಮತ್ತು ಅದಕ್ಕಿಂತ ಹೆಚ್ಚಿನ ಗಾತ್ರದಲ್ಲಿ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸುತ್ತವೆ. ಡೀಫಾಲ್ಟ್‌ಗಳೆಂದರೆ
sm:,md:,lg:,xl:, ಮತ್ತು2xl:. - ಸಿಸ್ಟಂ ಆದ್ಯತೆಯ ಮಾರ್ಪಡಕಗಳು: ಇವು ಬಳಕೆದಾರರ ಆಪರೇಟಿಂಗ್ ಸಿಸ್ಟಮ್ ಅಥವಾ ಬ್ರೌಸರ್ ಸೆಟ್ಟಿಂಗ್‌ಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುತ್ತವೆ. ಡಾರ್ಕ್ ಮೋಡ್‌ಗಾಗಿ
dark:ಅತ್ಯಂತ ಪ್ರಮುಖವಾದುದು, ಆದರೆmotion-reduce:ಮತ್ತುprint:ನಂತಹ ಇತರವುಗಳು ಸಹ ನಂಬಲಾಗದಷ್ಟು ಉಪಯುಕ್ತವಾಗಿವೆ. - ಸ್ಯೂಡೋ-ಕ್ಲಾಸ್ ಮತ್ತು ಸ್ಯೂಡೋ-ಎಲಿಮೆಂಟ್ ಮಾರ್ಪಡಕಗಳು: ಇವು ಎಲಿಮೆಂಟ್‌ನ ನಿರ್ದಿಷ್ಟ ರಚನಾತ್ಮಕ ಗುಣಲಕ್ಷಣಗಳು ಅಥವಾ ಭಾಗಗಳನ್ನು ಗುರಿಯಾಗಿಸುತ್ತವೆ, ಉದಾಹರಣೆಗೆ
first:,last:,odd:,even:,before:,after:, ಮತ್ತುplaceholder:.
ಉದಾಹರಣೆಗೆ, ಒಂದು ಸರಳ ಬಟನ್ ಈ ರೀತಿಯ ಸ್ಥಿತಿ ಮಾರ್ಪಡಕವನ್ನು ಬಳಸಬಹುದು:
<button class="bg-sky-500 hover:bg-sky-600 ...">Click me</button>
ಇಲ್ಲಿ, hover:bg-sky-600 ಬಳಕೆದಾರರ ಕರ್ಸರ್ ಬಟನ್‌ನ ಮೇಲಿದ್ದಾಗ ಮಾತ್ರ ಗಾಢವಾದ ಹಿನ್ನೆಲೆ ಬಣ್ಣವನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ. ಇದು ನಾವು ನಿರ್ಮಿಸಲಿರುವ ಮೂಲಭೂತ ಪರಿಕಲ್ಪನೆಯಾಗಿದೆ.
ಜೋಡಣೆಯ ಮ್ಯಾಜಿಕ್: ಡೈನಾಮಿಕ್ UIಗಳಿಗಾಗಿ ಮಾರ್ಪಡಕಗಳನ್ನು ಸಂಯೋಜಿಸುವುದು
ಮಾರ್ಪಡಕ ಜೋಡಣೆ ಎಂದರೆ ಹೆಚ್ಚು ನಿರ್ದಿಷ್ಟವಾದ ಸ್ಥಿತಿಯನ್ನು ರಚಿಸಲು ಈ ಪೂರ್ವಪ್ರತ್ಯಯಗಳನ್ನು ಒಟ್ಟಿಗೆ ಜೋಡಿಸುವ ಪ್ರಕ್ರಿಯೆ. ಸಿಂಟ್ಯಾಕ್ಸ್ ಸರಳ ಮತ್ತು ಸಹಜವಾಗಿದೆ: ನೀವು ಅವುಗಳನ್ನು ಒಂದರ ನಂತರ ಒಂದರಂತೆ, ಕೋಲನ್‌ಗಳಿಂದ ಬೇರ್ಪಡಿಸಿ ಇರಿಸುತ್ತೀರಿ.
ಸಿಂಟ್ಯಾಕ್ಸ್: modifier1:modifier2:utility-class
ಕ್ರಮವು ಮುಖ್ಯವಾಗಿದೆ. ಟೈಲ್‌ವಿಂಡ್ ಮಾರ್ಪಡಕಗಳನ್ನು ಎಡದಿಂದ ಬಲಕ್ಕೆ ಅನ್ವಯಿಸುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, md:hover:text-red-500 ಕ್ಲಾಸ್ ಸ್ಥೂಲವಾಗಿ ಈ ಕೆಳಗಿನ CSS ಗೆ ಅನುವಾದಿಸುತ್ತದೆ:
@media (min-width: 768px) {
.md\:hover\:text-red-500:hover {
color: red;
}
}
ಈ ನಿಯಮದ ಅರ್ಥ: "ಮಧ್ಯಮ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್ ಮತ್ತು ಅದಕ್ಕಿಂತ ಹೆಚ್ಚಿನ ಗಾತ್ರದಲ್ಲಿ, ಈ ಎಲಿಮೆಂಟ್ ಮೇಲೆ ಹೋವರ್ ಮಾಡಿದಾಗ, ಅದರ ಪಠ್ಯದ ಬಣ್ಣವನ್ನು ಕೆಂಪು ಮಾಡಿ." ಕೆಲವು ಪ್ರಾಯೋಗಿಕ, ನೈಜ-ಪ್ರಪಂಚದ ಉದಾಹರಣೆಗಳನ್ನು ಅನ್ವೇಷಿಸೋಣ.
ಉದಾಹರಣೆ 1: ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳು ಮತ್ತು ಸ್ಥಿತಿಗಳನ್ನು ಸಂಯೋಜಿಸುವುದು
ಟಚ್ ಸಾಧನಗಳು ಮತ್ತು ಕರ್ಸರ್-ಆಧಾರಿತ ಸಾಧನಗಳಲ್ಲಿ ಸಂವಾದಾತ್ಮಕ ಎಲಿಮೆಂಟ್‌ಗಳು ವಿಭಿನ್ನವಾಗಿ ವರ್ತಿಸುವಂತೆ ಮಾಡುವುದು ಒಂದು ಸಾಮಾನ್ಯ ಅವಶ್ಯಕತೆಯಾಗಿದೆ. ವಿಭಿನ್ನ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳಲ್ಲಿ ಹೋವರ್ ಪರಿಣಾಮಗಳನ್ನು ಬದಲಾಯಿಸುವ ಮೂಲಕ ನಾವು ಇದನ್ನು ಅಂದಾಜು ಮಾಡಬಹುದು.
ಡೆಸ್ಕ್‌ಟಾಪ್‌ನಲ್ಲಿ ಹೋವರ್ ಮಾಡಿದಾಗ ಸ್ವಲ್ಪ ಮೇಲಕ್ಕೆ ಏರುವ, ಆದರೆ ಟಚ್‌ನಲ್ಲಿ 'ಸ್ಟಿಕಿ ಹೋವರ್' ಸ್ಥಿತಿಗಳನ್ನು ತಪ್ಪಿಸಲು ಮೊಬೈಲ್‌ನಲ್ಲಿ ಯಾವುದೇ ಹೋವರ್ ಪರಿಣಾಮವನ್ನು ಹೊಂದಿರದ ಕಾರ್ಡ್ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಪರಿಗಣಿಸಿ.
<div class="... transition-transform duration-300 md:hover:scale-105 md:hover:-translate-y-1">...</div>
ವಿವರಣೆ:
transition-transform duration-300: ಇದು ಯಾವುದೇ ಟ್ರಾನ್ಸ್‌ಫಾರ್ಮ್ ಬದಲಾವಣೆಗಳಿಗೆ ಸುಗಮ ಪರಿವರ್ತನೆಯನ್ನು ಸಿದ್ಧಪಡಿಸುತ್ತದೆ.md:hover:scale-105: ಮಧ್ಯಮ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್ (768px) ಮತ್ತು ಅದಕ್ಕಿಂತ ಹೆಚ್ಚಿನ ಗಾತ್ರದಲ್ಲಿ, ಕಾರ್ಡ್ ಮೇಲೆ ಹೋವರ್ ಮಾಡಿದಾಗ, ಅದನ್ನು 5% ರಷ್ಟು ದೊಡ್ಡದು ಮಾಡಿ.md:hover:-translate-y-1: ಮಧ್ಯಮ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್ ಮತ್ತು ಅದಕ್ಕಿಂತ ಹೆಚ್ಚಿನ ಗಾತ್ರದಲ್ಲಿ, ಕಾರ್ಡ್ ಮೇಲೆ ಹೋವರ್ ಮಾಡಿದಾಗ, ಅದನ್ನು ಸ್ವಲ್ಪ ಮೇಲಕ್ಕೆ ಸರಿಸಿ.
768px ಗಿಂತ ಚಿಕ್ಕದಾದ ಪರದೆಗಳಲ್ಲಿ, md: ಮಾರ್ಪಡಕವು ಹೋವರ್ ಪರಿಣಾಮಗಳನ್ನು ಅನ್ವಯಿಸುವುದನ್ನು ತಡೆಯುತ್ತದೆ, ಇದು ಮೊಬೈಲ್ ಬಳಕೆದಾರರಿಗೆ ಉತ್ತಮ ಅನುಭವವನ್ನು ನೀಡುತ್ತದೆ.
ಉದಾಹರಣೆ 2: ಡಾರ್ಕ್ ಮೋಡ್ ಅನ್ನು ಇಂಟರಾಕ್ಟಿವಿಟಿಯೊಂದಿಗೆ ಲೇಯರಿಂಗ್ ಮಾಡುವುದು
ಡಾರ್ಕ್ ಮೋಡ್ ಇನ್ನು ಮುಂದೆ ಒಂದು ವಿಶಿಷ್ಟ ವೈಶಿಷ್ಟ್ಯವಲ್ಲ; ಇದು ಬಳಕೆದಾರರ ನಿರೀಕ್ಷೆಯಾಗಿದೆ. ಪ್ರತಿಯೊಂದು ಬಣ್ಣದ ಸ್ಕೀಮ್‌ಗೆ ನಿರ್ದಿಷ್ಟವಾದ ಸಂವಾದಾತ್ಮಕ ಶೈಲಿಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಜೋಡಣೆ ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
ಲೈಟ್ ಮತ್ತು ಡಾರ್ಕ್ ಮೋಡ್‌ಗಳೆರಡರಲ್ಲೂ ಅದರ ಡೀಫಾಲ್ಟ್ ಮತ್ತು ಹೋವರ್ ಸ್ಥಿತಿಗಳಿಗೆ ವಿಭಿನ್ನ ಬಣ್ಣಗಳನ್ನು ಹೊಂದಿರುವ ಲಿಂಕ್ ಅನ್ನು ಸ್ಟೈಲ್ ಮಾಡೋಣ.
<a href="#" class="text-blue-600 underline hover:text-blue-800 dark:text-cyan-400 dark:hover:text-cyan-200">Read more</a>
ವಿವರಣೆ:
text-blue-600 hover:text-blue-800: ಲೈಟ್ ಮೋಡ್‌ನಲ್ಲಿ (ಡೀಫಾಲ್ಟ್), ಪಠ್ಯವು ನೀಲಿ ಬಣ್ಣದ್ದಾಗಿದ್ದು, ಹೋವರ್ ಮಾಡಿದಾಗ ಗಾಢವಾಗುತ್ತದೆ.dark:text-cyan-400: ಡಾರ್ಕ್ ಮೋಡ್ ಸಕ್ರಿಯವಾಗಿದ್ದಾಗ, ಡೀಫಾಲ್ಟ್ ಪಠ್ಯದ ಬಣ್ಣವು ತಿಳಿ ಸಯಾನ್‌ಗೆ ಬದಲಾಗುತ್ತದೆ.dark:hover:text-cyan-200: ಡಾರ್ಕ್ ಮೋಡ್ ಸಕ್ರಿಯವಾಗಿದ್ದಾಗ ಮತ್ತು ಲಿಂಕ್ ಮೇಲೆ ಹೋವರ್ ಮಾಡಿದಾಗ, ಪಠ್ಯವು ಇನ್ನೂ ತಿಳಿ ಸಯಾನ್ ಬಣ್ಣಕ್ಕೆ ತಿರುಗುತ್ತದೆ.
ಒಂದೇ ಸಾಲಿನಲ್ಲಿ ಒಂದು ಎಲಿಮೆಂಟ್‌ಗಾಗಿ ಥೀಮ್-ಅರಿವಿನ ಶೈಲಿಗಳ ಸಂಪೂರ್ಣ ಸೆಟ್ ಅನ್ನು ಹೇಗೆ ರಚಿಸಬಹುದು ಎಂಬುದನ್ನು ಇದು ಪ್ರದರ್ಶಿಸುತ್ತದೆ.
ಉದಾಹರಣೆ 3: ತ್ರಿವಳಿ - ರೆಸ್ಪಾನ್ಸಿವ್, ಡಾರ್ಕ್ ಮೋಡ್, ಮತ್ತು ಸ್ಟೇಟ್ ಮಾರ್ಪಡಕಗಳನ್ನು ಜೋಡಿಸುವುದು
ಈಗ, ಈ ಮೂರು ಪರಿಕಲ್ಪನೆಗಳನ್ನು ಒಂದೇ ಶಕ್ತಿಯುತ ನಿಯಮದಲ್ಲಿ ಸಂಯೋಜಿಸೋಣ. ಒಂದು ಇನ್‌ಪುಟ್ ಫೀಲ್ಡ್ ಫೋಕಸ್ ಆಗಿದೆ ಎಂದು ಸೂಚಿಸಬೇಕಾಗಿದೆ ಎಂದು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ. ದೃಶ್ಯ ಪ್ರತಿಕ್ರಿಯೆಯು ಡೆಸ್ಕ್‌ಟಾಪ್ ಮತ್ತು ಮೊಬೈಲ್‌ನಲ್ಲಿ ವಿಭಿನ್ನವಾಗಿರಬೇಕು, ಮತ್ತು ಅದು ಡಾರ್ಕ್ ಮೋಡ್‌ಗೆ ಹೊಂದಿಕೊಳ್ಳಬೇಕು.
<input type="text" class="border-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 md:dark:focus:ring-yellow-400" />
ಇಲ್ಲಿ ಅತ್ಯಂತ ಸಂಕೀರ್ಣವಾದ ಕ್ಲಾಸ್‌ನ ಮೇಲೆ ಗಮನಹರಿಸೋಣ: md:dark:focus:ring-yellow-400.
ವಿವರಣೆ:
md:: ಈ ನಿಯಮವು ಮಧ್ಯಮ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್ (768px) ಮತ್ತು ಅದಕ್ಕಿಂತ ಅಗಲವಾದ ಪರದೆಗಳಲ್ಲಿ ಮಾತ್ರ ಅನ್ವಯಿಸುತ್ತದೆ.dark:: ಆ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ನೊಳಗೆ, ಬಳಕೆದಾರರು ಡಾರ್ಕ್ ಮೋಡ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿದ್ದರೆ ಮಾತ್ರ ಇದು ಅನ್ವಯಿಸುತ್ತದೆ.focus:: ಆ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್ ಮತ್ತು ಕಲರ್ ಮೋಡ್‌ನಲ್ಲಿ, ಇನ್‌ಪುಟ್ ಎಲಿಮೆಂಟ್ ಫೋಕಸ್‌ನಲ್ಲಿದ್ದಾಗ ಮಾತ್ರ ಇದು ಅನ್ವಯಿಸುತ್ತದೆ.ring-yellow-400: ಈ ಮೂರು ಷರತ್ತುಗಳು ಪೂರೈಸಿದಾಗ, ಹಳದಿ ಫೋಕಸ್ ರಿಂಗ್ ಅನ್ನು ಅನ್ವಯಿಸಿ.
ಈ ಒಂದೇ ಯುಟಿಲಿಟಿ ಕ್ಲಾಸ್ ನಮಗೆ ಅತ್ಯಂತ ನಿರ್ದಿಷ್ಟವಾದ ವರ್ತನೆಯನ್ನು ನೀಡುತ್ತದೆ: "ದೊಡ್ಡ ಪರದೆಗಳಲ್ಲಿ, ಡಾರ್ಕ್ ಮೋಡ್‌ನಲ್ಲಿ, ಈ ಫೋಕಸ್ ಆದ ಇನ್‌ಪುಟ್ ಅನ್ನು ಹಳದಿ ರಿಂಗ್‌ನೊಂದಿಗೆ ಹೈಲೈಟ್ ಮಾಡಿ." ಅದೇ ಸಮಯದಲ್ಲಿ, ಸರಳವಾದ focus:ring-blue-500 ಉಳಿದ ಎಲ್ಲಾ ಸನ್ನಿವೇಶಗಳಿಗೆ (ಮೊಬೈಲ್ ಲೈಟ್/ಡಾರ್ಕ್ ಮೋಡ್, ಮತ್ತು ಡೆಸ್ಕ್‌ಟಾಪ್ ಲೈಟ್ ಮೋಡ್) ಡೀಫಾಲ್ಟ್ ಫೋಕಸ್ ಶೈಲಿಯಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ.
ಮೂಲಭೂತ ಅಂಶಗಳನ್ನು ಮೀರಿ: `group` ಮತ್ತು `peer` ಜೊತೆ ಸುಧಾರಿತ ಜೋಡಣೆ
ಎಲಿಮೆಂಟ್‌ಗಳ ನಡುವೆ ಸಂಬಂಧಗಳನ್ನು ರಚಿಸುವ ಮಾರ್ಪಡಕಗಳನ್ನು ಪರಿಚಯಿಸಿದಾಗ ಜೋಡಣೆ ಇನ್ನಷ್ಟು ಶಕ್ತಿಯುತವಾಗುತ್ತದೆ. `group` ಮತ್ತು `peer` ಮಾರ್ಪಡಕಗಳು ಪೇರೆಂಟ್ ಅಥವಾ ಸಿಬ್ಲಿಂಗ್‌ನ ಸ್ಥಿತಿಯನ್ನು ಆಧರಿಸಿ ಒಂದು ಎಲಿಮೆಂಟ್ ಅನ್ನು ಸ್ಟೈಲ್ ಮಾಡಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತವೆ.
`group-*` ನೊಂದಿಗೆ ಸಮನ್ವಯ ಪರಿಣಾಮಗಳು
ಪೇರೆಂಟ್ ಎಲಿಮೆಂಟ್‌ನೊಂದಿಗಿನ ಸಂವಹನವು ಅದರ ಒಂದು ಅಥವಾ ಹೆಚ್ಚಿನ ಚೈಲ್ಡ್ ಎಲಿಮೆಂಟ್‌ಗಳ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರಬೇಕಾದಾಗ `group` ಮಾರ್ಪಡಕವು ಪರಿಪೂರ್ಣವಾಗಿದೆ. ಪೇರೆಂಟ್‌ಗೆ `group` ಕ್ಲಾಸ್ ಸೇರಿಸುವ ಮೂಲಕ, ನೀವು ಯಾವುದೇ ಚೈಲ್ಡ್ ಎಲಿಮೆಂಟ್‌ನಲ್ಲಿ `group-hover:`, `group-focus:`, ಇತ್ಯಾದಿಗಳನ್ನು ಬಳಸಬಹುದು.
ಕಾರ್ಡ್‌ನ ಯಾವುದೇ ಭಾಗದ ಮೇಲೆ ಹೋವರ್ ಮಾಡಿದಾಗ ಅದರ ಶೀರ್ಷಿಕೆಯ ಬಣ್ಣ ಬದಲಾಗುವ ಮತ್ತು ಬಾಣದ ಐಕಾನ್ ಚಲಿಸುವ ಕಾರ್ಡ್ ಅನ್ನು ರಚಿಸೋಣ. ಇದು ಡಾರ್ಕ್ ಮೋಡ್-ಅರಿವು ಕೂಡ ಆಗಿರಬೇಕು.
<a href="#" class="group block p-6 bg-white dark:bg-slate-800 rounded-lg shadow-md">
<h3 class="text-slate-900 group-hover:text-blue-600 dark:text-white dark:group-hover:text-blue-400">Card Title</h3>
<p class="text-slate-500 dark:text-slate-400">Card content goes here.</p>
<span class="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">→</span>
</a>
ಜೋಡಿಸಲಾದ ಮಾರ್ಪಡಕದ ವಿವರಣೆ:
h3ಮೇಲಿನdark:group-hover:text-blue-400: ಡಾರ್ಕ್ ಮೋಡ್ ಸಕ್ರಿಯವಾಗಿದ್ದಾಗ ಮತ್ತು ಪೇರೆಂಟ್ `group` ಮೇಲೆ ಹೋವರ್ ಮಾಡಿದಾಗ, ಶೀರ್ಷಿಕೆಯ ಪಠ್ಯದ ಬಣ್ಣವನ್ನು ಬದಲಾಯಿಸಿ. ಇದು ಡೀಫಾಲ್ಟ್ ಡಾರ್ಕ್ ಮೋಡ್ ಬಣ್ಣವನ್ನು ಅತಿಕ್ರಮಿಸುತ್ತದೆ ಆದರೆ ಲೈಟ್ ಮೋಡ್ ಹೋವರ್ ಶೈಲಿಯ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುವುದಿಲ್ಲ.spanಮೇಲಿನgroup-hover:translate-x-1: ಪೇರೆಂಟ್ `group` ಮೇಲೆ ಹೋವರ್ ಮಾಡಿದಾಗ (ಯಾವುದೇ ಮೋಡ್‌ನಲ್ಲಿ), ಬಾಣದ ಐಕಾನ್ ಅನ್ನು ಬಲಕ್ಕೆ ಸರಿಸಿ.
`peer-*` ನೊಂದಿಗೆ ಡೈನಾಮಿಕ್ ಸಿಬ್ಲಿಂಗ್ ಸಂವಹನಗಳು
`peer` ಮಾರ್ಪಡಕವನ್ನು ಸಿಬ್ಲಿಂಗ್ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಸ್ಟೈಲ್ ಮಾಡಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ. ನೀವು ಒಂದು ಎಲಿಮೆಂಟ್ ಅನ್ನು `peer` ಕ್ಲಾಸ್‌ನೊಂದಿಗೆ ಗುರುತಿಸಿದಾಗ, ನೀವು ನಂತರದ ಸಿಬ್ಲಿಂಗ್‌ನಲ್ಲಿ `peer-focus:`, `peer-invalid:`, ಅಥವಾ `peer-checked:` ನಂತಹ ಮಾರ್ಪಡಕಗಳನ್ನು ಬಳಸಿ ಪೀರ್‌ನ ಸ್ಥಿತಿಯನ್ನು ಆಧರಿಸಿ ಸ್ಟೈಲ್ ಮಾಡಬಹುದು.
ಒಂದು ಕ್ಲಾಸಿಕ್ ಬಳಕೆಯ ಪ್ರಕರಣವೆಂದರೆ ಫಾರ್ಮ್ ಇನ್‌ಪುಟ್ ಮತ್ತು ಅದರ ಲೇಬಲ್. ಇನ್‌ಪುಟ್ ಫೋಕಸ್ ಆದಾಗ ಲೇಬಲ್ ಬಣ್ಣ ಬದಲಾಗಬೇಕೆಂದು ನಾವು ಬಯಸುತ್ತೇವೆ, ಮತ್ತು ಇನ್‌ಪುಟ್ ಅಮಾನ್ಯವಾಗಿದ್ದರೆ ದೋಷ ಸಂದೇಶವು ಕಾಣಿಸಿಕೊಳ್ಳಬೇಕೆಂದು ಸಹ ನಾವು ಬಯಸುತ್ತೇವೆ. ಇದು ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳು ಮತ್ತು ಕಲರ್ ಸ್ಕೀಮ್‌ಗಳಾದ್ಯಂತ ಕಾರ್ಯನಿರ್ವಹಿಸಬೇಕು.
<div>
<label for="email" class="text-sm font-medium text-gray-700 dark:text-gray-300 peer-focus:text-violet-600 dark:peer-focus:text-violet-400">Email</label>
<input type="email" id="email" class="peer mt-1 block w-full border-gray-300 invalid:border-red-500 focus:border-violet-500 ..." required />
<p class="mt-2 invisible text-sm text-red-600 peer-invalid:visible">Please provide a valid email address.</p>
</div>
ಜೋಡಿಸಲಾದ ಮಾರ್ಪಡಕದ ವಿವರಣೆ:
labelಮೇಲಿನdark:peer-focus:text-violet-400: ಡಾರ್ಕ್ ಮೋಡ್ ಸಕ್ರಿಯವಾಗಿದ್ದಾಗ ಮತ್ತು ಸಿಬ್ಲಿಂಗ್ `peer` ಇನ್‌ಪುಟ್ ಫೋಕಸ್‌ನಲ್ಲಿದ್ದಾಗ, ಲೇಬಲ್‌ನ ಬಣ್ಣವನ್ನು ವೈಲೆಟ್‌ಗೆ ಬದಲಾಯಿಸಿ. ಇದು ಲೈಟ್ ಮೋಡ್‌ಗಾಗಿ ಪ್ರಮಾಣಿತ `peer-focus:text-violet-600` ನೊಂದಿಗೆ ಜೊತೆಯಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ.- ದೋಷ
pಮೇಲಿನpeer-invalid:visible: ಸಿಬ್ಲಿಂಗ್ `peer` ಇನ್‌ಪುಟ್ `invalid` ಸ್ಥಿತಿಯನ್ನು ಹೊಂದಿದ್ದಾಗ (ಉದಾ., ಖಾಲಿ ರಿಕ್ವೈರ್ಡ್ ಫೀಲ್ಡ್), ಅದರ ಗೋಚರತೆಯನ್ನು `invisible` ನಿಂದ `visible` ಗೆ ಬದಲಾಯಿಸಿ. ಇದು ಯಾವುದೇ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಇಲ್ಲದೆ ಫಾರ್ಮ್ ವ್ಯಾಲಿಡೇಶನ್ ಸ್ಟೈಲಿಂಗ್‌ನ ಒಂದು ಪ್ರಮುಖ ಉದಾಹರಣೆಯಾಗಿದೆ.
ಅಂತಿಮ ಗಡಿ: ಆರ್ಬಿಟ್ರರಿ ವೇರಿಯಂಟ್‌ಗಳೊಂದಿಗೆ ಜೋಡಣೆ
ಕೆಲವೊಮ್ಮೆ, ಟೈಲ್‌ವಿಂಡ್ ಬಾಕ್ಸ್‌ನ ಹೊರಗೆ ಮಾರ್ಪಡಕವನ್ನು ಒದಗಿಸದ ಸ್ಥಿತಿಯನ್ನು ಆಧರಿಸಿ ನೀವು ಶೈಲಿಯನ್ನು ಅನ್ವಯಿಸಬೇಕಾಗುತ್ತದೆ. ಇಲ್ಲಿಯೇ ಆರ್ಬಿಟ್ರರಿ ವೇರಿಯಂಟ್‌ಗಳು ಬರುತ್ತವೆ. ಅವು ನಿಮ್ಮ ಕ್ಲಾಸ್ ಹೆಸರಿನಲ್ಲಿಯೇ ಕಸ್ಟಮ್ ಸೆಲೆಕ್ಟರ್ ಬರೆಯಲು ನಿಮಗೆ ಅವಕಾಶ ಮಾಡಿಕೊಡುತ್ತವೆ, ಮತ್ತು ಹೌದು, ಅವುಗಳನ್ನು ಜೋಡಿಸಬಹುದು!
ಸಿಂಟ್ಯಾಕ್ಸ್ ಚೌಕ ಬ್ರಾಕೆಟ್‌ಗಳನ್ನು ಬಳಸುತ್ತದೆ: `[&_selector]:utility`.
ಉದಾಹರಣೆ 1: ಹೋವರ್‌ನಲ್ಲಿ ನಿರ್ದಿಷ್ಟ ಚೈಲ್ಡ್‌ಗಳನ್ನು ಗುರಿಯಾಗಿಸುವುದು
ನಿಮ್ಮ ಬಳಿ ಒಂದು ಕಂಟೇನರ್ ಇದೆ ಎಂದು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ, ಮತ್ತು ಕಂಟೇನರ್ ಮೇಲೆ ಹೋವರ್ ಮಾಡಿದಾಗ ಅದರೊಳಗಿನ ಎಲ್ಲಾ `` ಟ್ಯಾಗ್‌ಗಳು ಹಸಿರು ಬಣ್ಣಕ್ಕೆ ತಿರುಗಬೇಕೆಂದು ನೀವು ಬಯಸುತ್ತೀರಿ, ಆದರೆ ಇದು ದೊಡ್ಡ ಪರದೆಗಳಲ್ಲಿ ಮಾತ್ರ ಆಗಬೇಕು.
This is a paragraph with important text that will change color. This is another paragraph with another bolded part.<div class="p-4 border lg:hover:[&_strong]:text-green-500">
ವಿವರಣೆ:
lg:hover:[&_strong]:text-green-500 ಕ್ಲಾಸ್ ಒಂದು ರೆಸ್ಪಾನ್ಸಿವ್ ಮಾರ್ಪಡಕ (lg:), ಒಂದು ಸ್ಥಿತಿ ಮಾರ್ಪಡಕ (hover:), ಮತ್ತು ಒಂದು ಆರ್ಬಿಟ್ರರಿ ವೇರಿಯಂಟ್ ([&_strong]:) ಅನ್ನು ಸಂಯೋಜಿಸಿ ಅತ್ಯಂತ ನಿರ್ದಿಷ್ಟವಾದ ನಿಯಮವನ್ನು ರಚಿಸುತ್ತದೆ: "ದೊಡ್ಡ ಪರದೆಗಳು ಮತ್ತು ಅದಕ್ಕಿಂತ ಹೆಚ್ಚಿನ ಗಾತ್ರದಲ್ಲಿ, ಈ div ಮೇಲೆ ಹೋವರ್ ಮಾಡಿದಾಗ, ಎಲ್ಲಾ ಡಿಸೆಂಡೆಂಟ್ `` ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಹುಡುಕಿ ಮತ್ತು ಅವುಗಳ ಪಠ್ಯವನ್ನು ಹಸಿರು ಮಾಡಿ."
ಉದಾಹರಣೆ 2: ಆಟ್ರಿಬ್ಯೂಟ್ ಸೆಲೆಕ್ಟರ್‌ಗಳೊಂದಿಗೆ ಜೋಡಣೆ
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸಲು ಈ ತಂತ್ರವು ನಂಬಲಾಗದಷ್ಟು ಉಪಯುಕ್ತವಾಗಿದೆ, ಅಲ್ಲಿ ನೀವು ಸ್ಥಿತಿಯನ್ನು ನಿರ್ವಹಿಸಲು `data-*` ಆಟ್ರಿಬ್ಯೂಟ್‌ಗಳನ್ನು ಬಳಸಬಹುದು (ಉದಾ., ಅಕಾರ್ಡಿಯನ್‌ಗಳು, ಟ್ಯಾಬ್‌ಗಳು, ಅಥವಾ ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳಿಗಾಗಿ).
ಒಂದು ಅಕಾರ್ಡಿಯನ್ ಐಟಂನ ಕಂಟೆಂಟ್ ಪ್ರದೇಶವನ್ನು ಸ್ಟೈಲ್ ಮಾಡೋಣ, ಅದು ಡೀಫಾಲ್ಟ್ ಆಗಿ ಮರೆಯಾಗಿರುತ್ತದೆ ಆದರೆ ಅದರ ಪೇರೆಂಟ್ `data-state="open"` ಹೊಂದಿದ್ದಾಗ ಗೋಚರಿಸುತ್ತದೆ. ಡಾರ್ಕ್ ಮೋಡ್‌ನಲ್ಲಿ ಅದು ತೆರೆದಾಗ ವಿಭಿನ್ನ ಹಿನ್ನೆಲೆ ಬಣ್ಣವನ್ನು ಸಹ ನಾವು ಬಯಸುತ್ತೇವೆ.
<div data-state="closed" class="border rounded">
<h3>... Accordion Trigger ...</h3>
<div class="overflow-hidden h-0 [data-state=open]:h-auto dark:[data-state=open]:bg-gray-800">
Accordion Content...
</div>
</div>
ನಿಮ್ಮ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪೇರೆಂಟ್‌ನಲ್ಲಿ `data-state` ಆಟ್ರಿಬ್ಯೂಟ್ ಅನ್ನು `open` ಮತ್ತು `closed` ನಡುವೆ ಟಾಗಲ್ ಮಾಡುತ್ತದೆ.
ಜೋಡಿಸಲಾದ ಮಾರ್ಪಡಕದ ವಿವರಣೆ:
ಕಂಟೆಂಟ್ `div` ಮೇಲಿನ dark:[data-state=open]:bg-gray-800 ಕ್ಲಾಸ್ ಒಂದು ಪರಿಪೂರ್ಣ ಉದಾಹರಣೆಯಾಗಿದೆ. ಇದು ಹೇಳುತ್ತದೆ: "ಡಾರ್ಕ್ ಮೋಡ್ ಸಕ್ರಿಯವಾಗಿದ್ದಾಗ ಮತ್ತು ಎಲಿಮೆಂಟ್ `data-state="open"` ಆಟ್ರಿಬ್ಯೂಟ್ ಹೊಂದಿದ್ದಾಗ, ಗಾಢ ಬೂದು ಹಿನ್ನೆಲೆಯನ್ನು ಅನ್ವಯಿಸಿ." ಇದು ಎಲ್ಲಾ ಮೋಡ್‌ಗಳಲ್ಲಿ ಅದರ ಗೋಚರತೆಯನ್ನು ನಿಯಂತ್ರಿಸುವ ಮೂಲ `[data-state=open]:h-auto` ನಿಯಮದೊಂದಿಗೆ ಜೋಡಿಸಲ್ಪಟ್ಟಿದೆ.
ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯ ಪರಿಗಣನೆಗಳು
ಮಾರ್ಪಡಕ ಜೋಡಣೆ ಶಕ್ತಿಯುತವಾಗಿದ್ದರೂ, ಸ್ವಚ್ಛ ಮತ್ತು ನಿರ್ವಹಿಸಬಹುದಾದ ಕೋಡ್‌ಬೇಸ್ ಅನ್ನು ಕಾಪಾಡಿಕೊಳ್ಳಲು ಅದನ್ನು ಬುದ್ಧಿವಂತಿಕೆಯಿಂದ ಬಳಸುವುದು ಅತ್ಯಗತ್ಯ.
- ಓದುವಿಕೆಯನ್ನು ಕಾಪಾಡಿಕೊಳ್ಳಿ: ಯುಟಿಲಿಟಿ ಕ್ಲಾಸ್‌ಗಳ ಉದ್ದನೆಯ ಸಾಲುಗಳು ಓದಲು ಕಷ್ಟವಾಗಬಹುದು. ಅಧಿಕೃತ ಟೈಲ್‌ವಿಂಡ್ CSS ಪ್ರಿಟಿಯರ್ ಪ್ಲಗಿನ್‌ನಂತಹ ಸ್ವಯಂಚಾಲಿತ ಕ್ಲಾಸ್ ಸಾರ್ಟರ್ ಅನ್ನು ಬಳಸುವುದು ಹೆಚ್ಚು ಶಿಫಾರಸು ಮಾಡಲಾಗಿದೆ. ಇದು ಕ್ಲಾಸ್‌ಗಳ ಕ್ರಮವನ್ನು ಪ್ರಮಾಣೀಕರಿಸುತ್ತದೆ, ಸಂಕೀರ್ಣ ಸಂಯೋಜನೆಗಳನ್ನು ಸ್ಕ್ಯಾನ್ ಮಾಡಲು ಹೆಚ್ಚು ಸುಲಭವಾಗಿಸುತ್ತದೆ.
- ಕಾಂಪೊನೆಂಟ್ ಅಬ್‌ಸ್ಟ್ರಾಕ್ಷನ್: ನೀವು ಒಂದೇ ಸಂಕೀರ್ಣ ಮಾರ್ಪಡಕಗಳ ಜೋಡಣೆಯನ್ನು ಅನೇಕ ಎಲಿಮೆಂಟ್‌ಗಳಲ್ಲಿ ಪುನರಾವರ್ತಿಸುತ್ತಿರುವುದನ್ನು ಕಂಡುಕೊಂಡರೆ, ಆ ಮಾದರಿಯನ್ನು ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಕಾಂಪೊನೆಂಟ್‌ಗೆ (ಉದಾ., ರಿಯಾಕ್ಟ್ ಅಥವಾ ವ್ಯೂ ಕಾಂಪೊನೆಂಟ್, ಲಾರವೆಲ್‌ನಲ್ಲಿ ಬ್ಲೇಡ್ ಕಾಂಪೊನೆಂಟ್, ಅಥವಾ ಸರಳ ಪಾರ್ಶಿಯಲ್) ಅಬ್‌ಸ್ಟ್ರಾಕ್ಟ್ ಮಾಡಲು ಇದು ಒಂದು ಬಲವಾದ ಸಂಕೇತವಾಗಿದೆ.
- JIT ಎಂಜಿನ್ ಅನ್ನು ಅಪ್ಪಿಕೊಳ್ಳಿ: ಹಿಂದೆ, ಅನೇಕ ವೇರಿಯಂಟ್‌ಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುವುದರಿಂದ ದೊಡ್ಡ CSS ಫೈಲ್ ಗಾತ್ರಗಳಿಗೆ ಕಾರಣವಾಗುತ್ತಿತ್ತು. ಟೈಲ್‌ವಿಂಡ್‌ನ ಜಸ್ಟ್-ಇನ್-ಟೈಮ್ (JIT) ಎಂಜಿನ್‌ನೊಂದಿಗೆ, ಇದು ಸಮಸ್ಯೆಯಲ್ಲ. JIT ಎಂಜಿನ್ ನಿಮ್ಮ ಫೈಲ್‌ಗಳನ್ನು ಸ್ಕ್ಯಾನ್ ಮಾಡುತ್ತದೆ ಮತ್ತು ನಿಮಗೆ ಬೇಕಾದ ನಿಖರವಾದ CSS ಅನ್ನು ಮಾತ್ರ ಉತ್ಪಾದಿಸುತ್ತದೆ, ಇದರಲ್ಲಿ ಜೋಡಿಸಲಾದ ಮಾರ್ಪಡಕಗಳ ಪ್ರತಿಯೊಂದು ಸಂಕೀರ್ಣ ಸಂಯೋಜನೆಯೂ ಸೇರಿದೆ. ನಿಮ್ಮ ಅಂತಿಮ ಬಿಲ್ಡ್ ಮೇಲಿನ ಕಾರ್ಯಕ್ಷಮತೆಯ ಪರಿಣಾಮವು ನಗಣ್ಯವಾಗಿರುತ್ತದೆ, ಆದ್ದರಿಂದ ನೀವು ಆತ್ಮವಿಶ್ವಾಸದಿಂದ ಜೋಡಿಸಬಹುದು.
- ನಿರ್ದಿಷ್ಟತೆ ಮತ್ತು ಕ್ರಮವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ: ನಿಮ್ಮ HTML ನಲ್ಲಿ ಕ್ಲಾಸ್‌ಗಳ ಕ್ರಮವು ಸಾಮಾನ್ಯವಾಗಿ ಸಾಂಪ್ರದಾಯಿಕ CSS ನಲ್ಲಿರುವಂತೆ ನಿರ್ದಿಷ್ಟತೆಯ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುವುದಿಲ್ಲ. ಆದಾಗ್ಯೂ, ಒಂದೇ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್ ಮತ್ತು ಸ್ಥಿತಿಯಲ್ಲಿ ಎರಡು ಯುಟಿಲಿಟಿಗಳು ಒಂದೇ ಪ್ರಾಪರ್ಟಿಯನ್ನು ನಿಯಂತ್ರಿಸಲು ಪ್ರಯತ್ನಿಸಿದಾಗ (ಉದಾ., `md:text-left md:text-right`), ಸ್ಟ್ರಿಂಗ್‌ನಲ್ಲಿ ಕೊನೆಯದಾಗಿ ಕಾಣಿಸಿಕೊಳ್ಳುವದು ಗೆಲ್ಲುತ್ತದೆ. ಪ್ರಿಟಿಯರ್ ಪ್ಲಗಿನ್ ಈ ತರ್ಕವನ್ನು ನಿಮಗಾಗಿ ನಿಭಾಯಿಸುತ್ತದೆ.
ತೀರ್ಮಾನ: ನೀವು ಕಲ್ಪಿಸಬಹುದಾದ ಯಾವುದನ್ನಾದರೂ ನಿರ್ಮಿಸಿ
ಟೈಲ್‌ವಿಂಡ್ CSS ಮಾರ್ಪಡಕ ಜೋಡಣೆ ಕೇವಲ ಒಂದು ವೈಶಿಷ್ಟ್ಯವಲ್ಲ; ಇದು ಟೈಲ್‌ವಿಂಡ್ ಅನ್ನು ಸರಳ ಯುಟಿಲಿಟಿ ಲೈಬ್ರರಿಯಿಂದ ಸಮಗ್ರ UI ವಿನ್ಯಾಸ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗೆ ಏರಿಸುವ ಪ್ರಮುಖ ಕಾರ್ಯವಿಧಾನವಾಗಿದೆ. ರೆಸ್ಪಾನ್ಸಿವ್, ಸ್ಟೇಟ್, ಥೀಮ್, ಗ್ರೂಪ್, ಪೀರ್, ಮತ್ತು ಆರ್ಬಿಟ್ರರಿ ವೇರಿಯಂಟ್‌ಗಳನ್ನು ಸಂಯೋಜಿಸುವ ಕಲೆಯನ್ನು ಕರಗತ ಮಾಡಿಕೊಳ್ಳುವ ಮೂಲಕ, ನೀವು ಪೂರ್ವ-ನಿರ್ಮಿತ ಕಾಂಪೊನೆಂಟ್‌ಗಳ ಮಿತಿಗಳಿಂದ ಮುಕ್ತರಾಗುತ್ತೀರಿ ಮತ್ತು ನಿಜವಾದ ಬೆಸ್ಪೋಕ್, ಡೈನಾಮಿಕ್, ಮತ್ತು ರೆಸ್ಪಾನ್ಸಿವ್ ಇಂಟರ್‌ಫೇಸ್‌ಗಳನ್ನು ರೂಪಿಸುವ ಶಕ್ತಿಯನ್ನು ಪಡೆಯುತ್ತೀರಿ.
ಪ್ರಮುಖ ಅಂಶವೆಂದರೆ ನೀವು ಇನ್ನು ಮುಂದೆ ಏಕ-ಷರತ್ತಿನ ಶೈಲಿಗಳಿಗೆ ಸೀಮಿತವಾಗಿಲ್ಲ. ಒಂದು ಎಲಿಮೆಂಟ್ ನಿರ್ದಿಷ್ಟ ಸಂದರ್ಭಗಳ ಸಂಯೋಜನೆಯ ಅಡಿಯಲ್ಲಿ ಹೇಗೆ ಕಾಣಬೇಕು ಮತ್ತು ವರ್ತಿಸಬೇಕು ಎಂಬುದನ್ನು ನೀವು ಈಗ ಡಿಕ್ಲರೇಟಿವ್ ಆಗಿ ವ್ಯಾಖ್ಯಾನಿಸಬಹುದು. ಅದು ಡಾರ್ಕ್ ಮೋಡ್‌ಗೆ ಹೊಂದಿಕೊಳ್ಳುವ ಸರಳ ಬಟನ್ ಆಗಿರಲಿ ಅಥವಾ ಸಂಕೀರ್ಣ, ಸ್ಟೇಟ್-ಅರಿವಿನ ಫಾರ್ಮ್ ಕಾಂಪೊನೆಂಟ್ ಆಗಿರಲಿ, ಮಾರ್ಪಡಕ ಜೋಡಣೆಯು ಅದನ್ನು ಸೊಗಸಾಗಿ ಮತ್ತು ಸಮರ್ಥವಾಗಿ ನಿರ್ಮಿಸಲು ಬೇಕಾದ ಸಾಧನಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ, ಎಲ್ಲವೂ ನಿಮ್ಮ ಮಾರ್ಕಪ್‌ನ ಆರಾಮವನ್ನು ಬಿಡದೆಯೇ.